<template>
	<div class="CImagePicker">
		<!-- 遮罩层 -->
		<div class="container" v-show="panel">
			<div class="img-aside">
				<img id="image" :src="url" alt="cropper-img">
			</div>
			
			<div class="img-crop-buttons">
				<Button type="primary" @click="crop" class="img-b-item">上传</Button>
    				<Button type="ghost" class="img-b-item" @click="dismiss">取消</Button>
			</div>
		</div>

		<div class="img-upload">
			<div class="show">
				<div class="picture" :style="'backgroundImage: url(' + data + '); '
					+'width:'+ display.width +'px; height:'+ display.height+'px;'">
				</div>
				<Progress :percent="progress" v-show="progress > 0"></Progress>
			</div>
			
			<Upload
		        :multiple="false"
		        :show-upload-list="false"
		        action="null"
		        :format="['jpg','jpeg','png']"
		        :max-size="2048"
		        :before-upload="handleBeforeUpload">
		        <Button class="selImg" type="ghost" icon="ios-cloud-upload-outline">选择图片</Button>
		    </Upload>
		</div>
	</div>
</template>

<script>
	import Cropper from 'cropperjs';

	function dealImage(path, obj, callback) {
		var img = new Image();
		img.src = path;
		img.onload = function() {
			var that = this;
			// 默认按比例压缩
			var w = that.width,
				h = that.height,
				scale = w / h;
			w = obj.width || w;
			h = obj.height || (w / scale);
			var quality = 0.7; // 默认图片质量为0.7
			//生成canvas
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			// 创建属性节点
			var anw = document.createAttribute("width");
			anw.nodeValue = w;
			var anh = document.createAttribute("height");
			anh.nodeValue = h;
			canvas.setAttributeNode(anw);
			canvas.setAttributeNode(anh);
			ctx.drawImage(that, 0, 0, w, h);
			// 图像质量
			if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
				quality = obj.quality;
			}
			// quality值越小，所绘制出的图像越模糊
			var base64 = canvas.toDataURL('image/jpeg', quality);
			// 回调函数返回base64的值
			callback(base64);
		}
	}
export default {
	name:'CImagePicker',
		components: {
		},
		data() {
			return {
				data: this.durl,
				picValue: '',
				cropper: '',
				croppable: false,
				panel: false,
				url: ''
			}
		},
		mounted() {
			var $this = this;
			//初始化这个裁剪框
			var image = document.getElementById('image');
			this.cropper = new Cropper(image, {
				aspectRatio: $this.rate,
				viewMode: 1,
				background: false,
				zoomable: false,
				ready: function() {
					$this.croppable = true;
				}
			});
		},
		watch: {
			'durl'(val) {
				this.data = val;
			}
	    },
		methods: {
			getObjectURL(file) {
				var url = null;
				if(window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if(window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if(window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			},
			selectImage() {
				this.$refs['imgFile'].click();
			},
			dismiss() {
				this.panel = false; 
			},
			crop() {
				this.panel = false;
				var croppedCanvas;
				if(!this.croppable) {
					return;
				}
				// Crop
				croppedCanvas = this.cropper.getCroppedCanvas();
				this.data = croppedCanvas.toDataURL();
				this.uploadImg(this.data);
			},
			handleBeforeUpload (file) {
				var $this = this;
			    this.panel = true;
				this.picValue = file;
				this.url = this.getObjectURL(this.picValue);
				dealImage(this.url, {
					width: 1000,
					quality: 0.7
				}, function(base64) {
					//每次替换图片要重新得到新的url
					if($this.cropper) {
						$this.cropper.replace(base64);
					}
					$this.panel = true;
				})
				return false;
			},
			uploadImg(data) {
				//这边写图片的上传
				this.$emit('upload-data', data);
			}
		},
		props: ['progress', 'durl', 'rate', 'display']
	}
</script>
<style scoped="scoped">
	.container {
		z-index: 999;
		position: fixed;
		padding-top: 60px;
		left: 240px;
		top: 60px;
		right: 0px;
		bottom: 0px;
		background: rgba(0, 0, 0, 0.54);
	}
	.img-aside {
		width: 80%;
		height: 80%;
		margin: 0 auto;
	}
	.img-crop-buttons {
		background-color: #F8F8F8;
		width: 80%;
		text-align: center;
		margin: 0 auto;
		height: 50px;
		line-height: 50px;
	}
	.img-crop-buttons .img-b-item {
		width: 100px;
		margin-right: 10px;
		margin-left: 10px;
	}
	
	.img-upload .show {
		width: 180px;
	}
	.img-upload .show .picture {
		border-radius: 5px;
		-webkit-border-radius: 5px;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border: 1px solid #d7dde4;
	}
	
	.img-upload {
	}
	.selImg {
		margin-top: 10px;
	}
	
	#image {
		max-width: 100%;
	}
</style>
<style>
	.cropper-container {
		font-size: 0;
		line-height: 0;
		position: relative;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		direction: ltr;
		-ms-touch-action: none;
		touch-action: none
	}
	
	.cropper-container img {
		/* Avoid margin top issue (Occur only when margin-top <= -height) */
		display: block;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		max-height: none !important;
		width: 100%;
		height: 100%;
		image-orientation: 0deg
	}
	
	.cropper-wrap-box,
	.cropper-canvas,
	.cropper-drag-box,
	.cropper-crop-box,
	.cropper-modal {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.cropper-wrap-box {
		overflow: hidden;
	}
	
	.cropper-drag-box {
		opacity: 0;
		background-color: #fff;
	}
	
	.cropper-modal {
		opacity: .5;
		background-color: #000;
	}
	
	.cropper-view-box {
		display: block;
		overflow: hidden;
		width: 100%;
		height: 100%;
		outline: 1px solid #39f;
		outline-color: rgba(51, 153, 255, 0.75);
	}
	
	.cropper-dashed {
		position: absolute;
		display: block;
		opacity: .5;
		border: 0 dashed #eee
	}
	
	.cropper-dashed.dashed-h {
		top: 33.33333%;
		left: 0;
		width: 100%;
		height: 33.33333%;
		border-top-width: 1px;
		border-bottom-width: 1px
	}
	
	.cropper-dashed.dashed-v {
		top: 0;
		left: 33.33333%;
		width: 33.33333%;
		height: 100%;
		border-right-width: 1px;
		border-left-width: 1px
	}
	
	.cropper-center {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 0;
		height: 0;
		opacity: .75
	}
	
	.cropper-center:before,
	.cropper-center:after {
		position: absolute;
		display: block;
		content: ' ';
		background-color: #eee
	}
	
	.cropper-center:before {
		top: 0;
		left: -3px;
		width: 7px;
		height: 1px
	}
	
	.cropper-center:after {
		top: -3px;
		left: 0;
		width: 1px;
		height: 7px
	}
	
	.cropper-face,
	.cropper-line,
	.cropper-point {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		opacity: .1;
	}
	
	.cropper-face {
		top: 0;
		left: 0;
		background-color: #fff;
	}
	
	.cropper-line {
		background-color: #39f
	}
	
	.cropper-line.line-e {
		top: 0;
		right: -3px;
		width: 5px;
		cursor: e-resize
	}
	
	.cropper-line.line-n {
		top: -3px;
		left: 0;
		height: 5px;
		cursor: n-resize
	}
	
	.cropper-line.line-w {
		top: 0;
		left: -3px;
		width: 5px;
		cursor: w-resize
	}
	
	.cropper-line.line-s {
		bottom: -3px;
		left: 0;
		height: 5px;
		cursor: s-resize
	}
	
	.cropper-point {
		width: 5px;
		height: 5px;
		opacity: .75;
		background-color: #39f
	}
	
	.cropper-point.point-e {
		top: 50%;
		right: -3px;
		margin-top: -3px;
		cursor: e-resize
	}
	
	.cropper-point.point-n {
		top: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: n-resize
	}
	
	.cropper-point.point-w {
		top: 50%;
		left: -3px;
		margin-top: -3px;
		cursor: w-resize
	}
	
	.cropper-point.point-s {
		bottom: -3px;
		left: 50%;
		margin-left: -3px;
		cursor: s-resize
	}
	
	.cropper-point.point-ne {
		top: -3px;
		right: -3px;
		cursor: ne-resize
	}
	
	.cropper-point.point-nw {
		top: -3px;
		left: -3px;
		cursor: nw-resize
	}
	
	.cropper-point.point-sw {
		bottom: -3px;
		left: -3px;
		cursor: sw-resize
	}
	
	.cropper-point.point-se {
		right: -3px;
		bottom: -3px;
		width: 20px;
		height: 20px;
		cursor: se-resize;
		opacity: 1
	}
	
	@media (min-width: 768px) {
		.cropper-point.point-se {
			width: 15px;
			height: 15px
		}
	}
	
	@media (min-width: 992px) {
		.cropper-point.point-se {
			width: 10px;
			height: 10px
		}
	}
	
	@media (min-width: 1200px) {
		.cropper-point.point-se {
			width: 5px;
			height: 5px;
			opacity: .75
		}
	}
	
	.cropper-point.point-se:before {
		position: absolute;
		right: -50%;
		bottom: -50%;
		display: block;
		width: 200%;
		height: 200%;
		content: ' ';
		opacity: 0;
		background-color: #39f
	}
	
	.cropper-invisible {
		opacity: 0;
	}
	
	.cropper-bg {
		background-image: url('');
	}
	
	.cropper-hide {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
	}
	
	.cropper-hidden {
		display: none !important;
	}
	
	.cropper-move {
		cursor: move;
	}
	
	.cropper-crop {
		cursor: crosshair;
	}
	
	.cropper-disabled .cropper-drag-box,
	.cropper-disabled .cropper-face,
	.cropper-disabled .cropper-line,
	.cropper-disabled .cropper-point {
		cursor: not-allowed;
	}
</style>